<style lang="less" scoped>
  .in-time{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      text-align: center;
      color: #00F6FF;
      line-height: 40px;
      margin-bottom: 5px;
    }
    &_content{
      height: calc(100% - 45px);
    }
    .no-data{
      color: #fff;
      width: 100%;
      font-size: 14px;
      height: calc(100% - 45px);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /deep/.el-table{
      background-color: #1C479F;
    }
    /deep/.el-table th.is-leaf, .el-table td{
      background-color: #0973ca;
      border-bottom: 1px solid #0973ca;
    }
    /deep/.el-table tr{
      background-color: #1C479F;
    }
    /deep/.el-table td{
      border-bottom: 1px solid #00BFE9;
    }
    /deep/.el-table .cell{
      color: #fff;
      height: 15px;
      line-height: 15px;
    }
    /deep/.el-table th > .cell{
      color: #fff;
    }
    /deep/.el-table--medium td{
      padding: 7px 0;
    }
    /deep/.el-table tbody tr:hover >td  {
      background-color: unset !important;
    }
    /deep/.el-table th.gutter, .el-table td.gutter{
      width: 0px !important;
      display: none !important;
    }
    ::-webkit-scrollbar {
      width: 0px;
      height: 0px;
      background-color: #034694;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #0A306F;
      border-radius: 3px;
    }

  }
</style>

<template>
  <div class="in-time">
    <div class="in-time_title">
      <span>{{ inTimeTitle }}</span>
    </div>
    <div class="in-time_content">
      <div v-if="isStrock == 'chestPain'" id="inTime" class="in-time_content" />
      <el-table
        v-if="isStrock == 'stroke'"
        height="100%"
        :data="tableData"
      >
        <el-table-column label="姓名" align="center" prop="name" />
        <el-table-column label="住院号" align="center" prop="inpatient_no" />
        <el-table-column label="科室" align="center" prop="departmentName" />
        <el-table-column label="时间" align="center" prop="dpt" />
      </el-table>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getD2BRecently, getDPTRankingThisMonth } from '@/api/comprehensive/inTime'
export default {
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      inTimeTitle: '入门到介入时间',
      tableData: [],
      interVal: null
    }
  },
  watch: {
    'isStrock'() {
      this.$nextTick(() => {
        this.getChart()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getChart()
    })
    this.interVal = setInterval(() => {
      this.getChart()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.interVal)
  },
  methods: {
    getChart() {
      if (this.isStrock == 'chestPain') {
        let myChart = echarts.init(document.getElementById('inTime'))
        // myChart.clear()
        myChart.showLoading({
          text: '',
          fontSize: 18,
          left: 'center',
          color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
          textColor: '#fff', // 文字颜色
          maskColor: 'rgba(255, 255, 255, 0)' // 背景色
        })
        window.addEventListener('resize', myChart.resize)
        this.inTimeTitle = '入门到介入时间'
        let nameData = []
        let d2bData = []
        getD2BRecently({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              res.data.forEach(el => {
                nameData.push(el.name)
                d2bData.push(el.d2B)
              })
              let option = {
                grid: {
                  top: '2px',
                  left: '3%',
                  right: '10%',
                  bottom: '0',
                  containLabel: true
                },
                xAxis: {
                  name: '',
                  type: 'value',
                  nameTextStyle: {
                    color: '#fff'
                  },
                  axisLabel: {
                    color: 'fff'
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#59BCFB33'
                    }
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  }
                },
                yAxis: {
                  type: 'category',
                  nameTextStyle: {
                    color: '#fff'
                  },
                  splitLine: {
                    show: false
                  },
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    lineStyle: {
                      color: '#59BCFB33'
                    }
                  },
                  axisLabel: {
                    color: '#fff'
                  },
                  data: nameData
                },
                series: [{
                  name: '时间',
                  type: 'bar',
                  barWidth: 10,
                  label: {
                    formatter: '{c}',
                    show: true,
                    color: '#fff',
                    position: 'right'
                  },
                  itemStyle: {
                    color: '#008CFF',
                    borderRadius: 1
                  },
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(110, 193, 244, 0.2)'
                  },
                  data: d2bData
                }]
              }
              myChart.setOption(option)
            } else {
              myChart.showLoading({
                text: '暂无数据',
                fontSize: 18,
                left: 'center',
                color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
                textColor: '#fff', // 文字颜色
                maskColor: 'rgba(255, 255, 255, 0)' // 背景色
              })
            }
          }
        })
      } else if (this.isStrock == 'stroke') {
        this.inTimeTitle = '本月DPT耗时排名前5位患者'
        // this.tableData = []
        getDPTRankingThisMonth({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              this.tableData = res.data
            }
          }
        })
      }
    }
  }
}
</script>
